<template>
  <div>
    <a-modal
      class="modal"
      v-model="visible"
      :title="title"
      centered
      :width="modalWidth"
      @cancel="close"
      :destroyOnClose="true"
      @ok="handleOk"
      ok-text="生成海报"
      :cancel-button-props="{ style: { display: 'none' } }"
      :maskClosable="false"
    >
      <div class="content">
        <div class="slide-left">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="24">
                <a-form-item style="display: flex">
                  <div style="display: flex">
                    <a-select placeholder="请选择" style="width: 150px">
                      <a-select-option v-for="(item, index) in list1" :key="index">{{ item.name }}</a-select-option>
                    </a-select>
                    <a-input v-model="form.name" placeholder="请输入搜索内容" style="margin-left: 5px; width: 100%" />
                  </div>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item>
                  <a-select v-model="form.brandIds" placeholder="品牌（多选）" :getPopupContainer="triggerNode => triggerNode.parentNode" show-search mode="multiple">
                    <a-select-option v-for="(item, index) in brandList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :md="6" :sm="24">
                <a-form-item>
                  <a-tree-select
                    v-model="form.classList"
                    :dropdownStyle="{ maxHeight: '476px' }"
                    :tree-data="classList"
                    tree-checkable
                    allowClear
                    placeholder="品类（多选）"
                    search-placeholder="Please select"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item>
                  <a-select v-model="form.years" placeholder="年份（多选）" :getPopupContainer="triggerNode => triggerNode.parentNode" show-search mode="multiple">
                    <a-select-option v-for="(item, index) in yearList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" style="margin-top: 12px">
              <a-col :md="6" :sm="24">
                <a-form-item>
                  <a-select v-model="form.bandIds" placeholder="波段（多选）" :getPopupContainer="triggerNode => triggerNode.parentNode" show-search mode="multiple">
                    <a-select-option v-for="(item, index) in bandList" :key="index" :value="item.id">{{ item.attribname }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <span class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery">查询</a-button>
                  <a-button @click="searchReset" style="margin-left: 8px">重置</a-button>
                </span>
              </a-col>
            </a-row>
            <a-row style="margin-top: 12px">
              <a-col :md="16" :sm="24">
                <a-button type="primary" icon="plus" @click="addAll">全部添加</a-button>
              </a-col>
            </a-row>
          </a-form>
          <div class="ant-pro-pages-list-projects-cardList">
            <a-list :loading="loading" :data-source="goodList" :grid="{ gutter: 0 }">
              <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
                <product :item="item" type="product" :isAdd="true" @add="addSingle"></product>
              </a-list-item>
            </a-list>
          </div>
          <div class="pagination" v-if="goodList.length > 0">
            <a-pagination show-size-changer show-quick-jumper :default-current="currentPage" :total="total" @change="onChangeCode" @showSizeChange="onShowSizeChange" />
          </div>
        </div>
        <div class="slide-right">
          <div class="slide-head">
            <div>已选内容</div>
          </div>
          <a-list :grid="{ gutter: 0 }" :data-source="chosedList">
            <a-list-item slot="renderItem" slot-scope="item, index">
              <div class="edit-content">
                <div>
                  <img
                    slot="cover"
                    v-lazy="item.cover_imgs ? item.cover_imgs : 'https://img.bzhz.jnbygroup.com/cloth.png'"
                    :alt="item.value"
                    style="width: 60px; height: 60px; object-fit: scale-down"
                  />
                </div>
                <div style="margin-left: 12px">
                  <div class="edit-title">{{ item.value }}</div>
                  <div>{{ item.name }}</div>
                </div>
                <a-icon type="close" style="margin-left: auto" @click="deleteClick(item.product_id)" />
              </div>
            </a-list-item>
          </a-list>
          <p class="bottom-tip" v-show="showBottom && chosedList.length > 0">
            <a-spin v-if="loadingMore" />
            <span v-else>没有更多啦</span>
          </p>
        </div>
      </div>
      <a-modal title="提示" :visible="visibleTip" @ok="clearOk" @cancel="visibleTip = false">
        <p style="fontsize: 16px">是否清空已选内容？</p>
      </a-modal>
      <a-modal title="提示" :visible="visibleAddAll" @ok="sureAddAll" @cancel="visibleAddAll = false">
        <p style="fontsize: 16px">全部添加前将会清空已选内容，是否全部添加？</p>
      </a-modal>
      <template slot="footer">
        <a-button @click="clearBtn">清空</a-button>
        <a-button type="primary" @click="handleOk">生成海报</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import { searchList, searchBandList, searchProduct } from '@/api/pos/shareCode.js'
import product from '@/views/pos+/activityConfiguration/components/product'
import { string } from 'mathjs'
export default {
  props: {
    weid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      form: {},
      condition: [],
      title: '商品',
      list1: [],
      brandList: [],
      classList: [],
      yearList: [],
      searsonList: [],
      bandList: [],
      type: 'product',
      goodList: [],
      currentPage: 1,
      total: 0,
      totalPages: 0,
      pageSize: 10,
      loading: false,
      chosedList: [],
      modalWidth: '1320px',
      showBottom: false,
      loadingMore: false,
      currentScrollPage: 1,
      visibleTip: false,
      visibleAddAll: false
    }
  },
  components: {
    product
  },
  methods: {
    // 全部添加
    addAll() {
      if (this.total > 50) {
        this.$message.warning('最多只可添加50个内容')
        return
      }
      this.visibleAddAll = true
    },
    sureAddAll() {
      this.visibleAddAll = false
      this.onLoadMore()
    },
    // 单个添加
    addSingle(val) {
      const that = this
      if (this.chosedList.length >= 50) {
        this.$message.warning('最多只可添加50个内容')
        return
      }
      let isSame = this.chosedList.some(item => item.product_id == val.product_id)
      if (!isSame) {
        this.chosedList.push(val)
      } else {
        this.$message.warning('不可重复添加')
      }
    },
    // 查询列表
    async searchQuery() {
      this.currentPage = 1
      this.getList()
    },
    // 删除
    deleteClick(val) {
      const that = this
      that.chosedList.map((item, index) => {
        if (item.product_id == val) {
          that.chosedList.splice(index, 1)
        }
      })
    },
    clearBtn() {
      if (this.chosedList.length == 0) {
        this.$message.warning('请先添加商品')
        return
      }
      this.visibleTip = true
    },
    clearOk() {
      this.visibleTip = false
      this.init()
    },
    init() {
      this.showBottom = false
      this.loadingMore = false
      this.currentScrollPage = 1
      this.chosedList = []
    },
    onLoadMore() {
      let classList = []
      if (this.form.classList) {
       if(this.form.classList.length > 0){
          classList = this.form.classList.map(item => {
          return item.substring(0, item.length - 8)
        })
       }
      }
      const that = this
      const data = {
        page: {
          pageNo: 1,
          pageSize: this.total
        },
        requestData: {
          weid: this.weid,
          name: this.form.name,
          bandId: this.form.bandIds,
          brandIds: this.form.brandIds,
          smallCategoryIds: classList,
          years: this.form.years
        }
      }
      searchProduct(data).then(res => {
        if (res.code == 0) {
          let dataList = res.data
          that.chosedList = dataList
          that.showBottom = true
          that.loadingMore = false
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    searchReset() {
      this.form = {}
      this.currentPage = 1
      this.getList()
    },
    // 获取商品列表
    getList() {
      let classList = []
      if (this.form.classList) {
       if(this.form.classList.length > 0){
          classList = this.form.classList.map(item => {
          return item.substring(0, item.length - 8)
        })
       }
      }
      const that = this
      const d = {
        name: this.form.name,
        bandId: this.form.bandIds,
        brandIds: this.form.brandIds,
        smallCategoryIds: classList,
        years: this.form.years,
        weid: this.weid,
        sorted: 1
      }
      const data = {
        page: {
          pageNo: this.currentPage,
          pageSize: this.pageSize
        },
        requestData: d
      }
      searchProduct(data).then(res => {
        that.loading = false
        if (res.code == 0) {
          let result = res.page
          that.currentPage = result.pageNo
          that.total = result.count
          that.totalPages = result.pages
          const dataList = res.data.map(item => {
            const iconLoading = false
            return {
              ...item,
              iconLoading
            }
          })
          that.goodList = dataList
          console.log('===商品列表===', that.goodList)
        } else {
          that.$message.error(res.msg)
        }
      })
    },
    show() {
      this.visible = true
      this.getSearchList()
      this.getSearchBandList()
      if (this.type == 'product') {
        this.list1 = [{ name: '款号' }, { name: '商品名' }]
      } else {
        this.list1 = [{ name: '素材ID' }, { name: '标题' }, { name: '商品' }, { name: '创建人' }]
      }
    },
    onChangeCode(e) {
      this.currentPage = e
      this.getList()
    },
    onShowSizeChange(current, pageSize) {
      this.currentPage = current
      this.pageSize = pageSize
      this.getList()
    },
    // 关闭
    close() {
      this.form = {}
      this.visible = false
      this.init()
    },
    // 生成海报
    handleOk() {
      if (this.chosedList.length == 0) {
        this.$message.warning('请先添加商品')
        return
      }
      let arr = this.chosedList.map(item => {
        return item.product_id
      })
      this.$emit('creatPoster', arr)
    },
    // 搜索条件
    async getSearchList() {
      const that = this
      const res = await searchList()
      if (res.code == 0) {
        let result = res.data
        result.map(item => {
          if (item.id == '00020000') {
            item.children.map((li, index) => {
              if (li.code == 4 && li.name == '婴童') {
                item.children.splice(index, 1)
              }
            })
            that.brandList = item.children
          } else if (item.id == '00021000') {
            // 品类
            let list = item.children.map(item1 => {
              let li = {
                title: item1.name,
                value: item1.code,
                key: item1.code,
                children: item1.children.map((item2, index2) => {
                  return {
                    title: item2.name,
                    value: item2.code + item2.id,
                    key: item2.code + item2.id
                  }
                })
              }
              return li
            })
            that.classList = list
          } else if (item.id == '00025000') {
            that.yearList = item.children
          } else if (item.id == '00026000') {
            that.searsonList = item.children
          }
        })
      }
      this.getList()
    },
    // 波段
    async getSearchBandList() {
      const that = this
      const res = await searchBandList()
      if (res.code == 0) {
        let result = res.data
        that.bandList = result.bandsV2
      }
    }
  }
}
</script>
<style lang="less" scoped>
.modal {
  display: flex;
  justify-content: space-between;
}
.content {
  display: flex;
}
/deep/ .ant-select-selection--multiple {
  max-height: 40px;
  overflow-y: scroll;
}
/deep/ .ant-list-grid .ant-col > .ant-list-item {
  border: 1px solid #eee;
}
/deep/ .ant-form-inline .ant-form-item {
  display: block !important;
}
/deep/ .ant-form-inline .ant-form-item > .ant-form-item-control-wrapper {
  display: block !important;
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 24px;
  height: auto;
  min-height: 200px;
  overflow-y: auto;
  max-height: 500px;
  overflow-y: scroll;
  margin-bottom: 20px;
  /deep/ .ant-row {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 172px);
    // grid-row-gap: 16px;
    grid-column-gap: 8px;
  }
  /deep/ .ant-row::before {
    content: '';
    width: 0;
    display: none;
  }

  /deep/ .ant-list-item {
    margin-bottom: 24px;
    .ant-card-hoverable {
      cursor: default;
    }
  }
  /deep/ .ant-card {
    width: 172px;
    position: relative;
    overflow: hidden;
    padding: 12px;
  }
  /deep/ .ant-card-hoverable:hover {
    border: 1px solid #1890ff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
  }
  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }
  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }
  /deep/ .ant-card-cover {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #fff;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      border-radius: 4px;
    }
  }
  /deep/ .ant-card-body {
    padding: 0 0 12px;
    position: relative;
    min-height: 114px;
    > p {
      margin-top: -30px;
      background: rgba(0, 0, 0, 0.4);
      line-height: 30px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      border-radius: 0 0 4px 4px;
    }
  }
  .cardItemContent {
    padding: 0px 0px 6px;
    line-height: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    > p {
      color: #cdcdcd;
      font-size: 12px;
      line-height: 20px;
      margin-bottom: 0;
    }
    > h3 {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .topping {
        height: 22px;
        border-radius: 2px;
        border: 1px solid #1890ff;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1890ff;
        line-height: 22px;
        padding: 0 4px;
        margin-right: 4px;
        display: block;
        float: left;
        margin-top: 3px;
      }
    }

    .red {
      color: #f45555;
      font-size: 14px;
      line-height: 26px;
    }
    .origin {
      font-size: 12px;

      font-weight: 400;
      color: #8c8c8c;
      line-height: 26px;
    }
    .blue {
      color: #1890ff;
    }
    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
    /deep/.ant-skeleton-title {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .btn {
    position: absolute;
    bottom: 4px;
    height: 24px;
    width: 148px;
    button {
      height: 24px;
      border-radius: 6px;
    }
    button:active {
      transform: scale(0.9);
    }
  }
  /deep/ .ant-list-pagination {
    margin-top: 0;
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
}
.slide-left {
  width: 1000px;
}
.slide-right {
  width: 300px;
  border-left: 1px solid #e8e8e8;
  margin-left: 20px;
  padding-left: 20px;
  max-height: 700px;
  overflow-y: scroll;
}
.slide-head {
  padding: 12px;
  box-sizing: border-box;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.edit-content {
  display: flex;
  padding: 12px 12px;
}
.edit-box {
  padding: 12px 12px;
}
.edit-title {
  margin-top: 6px;
  margin-bottom: 5px;
}
</style>